<template>
  <view class="l-bottom-button width-full" :style="{background}" :class="{shadow:boxShadow}">
    <view class="padding-tb-20 padding-lr-30">
      <slot />
      <tui-button
        v-if="showButton"
        :type="type"
        :shadow="shadow"
        :shape="shape"
        :height="height"
        :disabled="disabled"
        :text="text"
        @click="onclick"
      />
    </view>
    <safe-area-bottom />
  </view>
</template>

<script>
export default {
  name: 'LBottomButton',
  props: {
    text: {
      type: [String, null],
      default: ''
    },
    type: {
      type: String,
      default: 'primary'
    },
    shadow: {
      type: Boolean,
      default: true
    },
    shape: {
      type: String,
      default: 'square'
    },
    height: {
      type: String,
      default: '96rpx'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: ''
    },
    boxShadow: {
      type: Boolean,
      default: true
    },
    showButton: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onclick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
.l-bottom-button{
  @include position(fixed,$left:0,$bottom:0);
  background:$color-background;
  z-index:990;
}
</style>
